In diesem Kapitel schauen wir uns responsives und barrierefreies Webdesign an und wie CSS dabei unterstützen kann.

Was ist responsives Webdesign? Beim responsiven Webdesign handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Websites, sodass diese auf Eigenschaften des jeweils benutzten Endgeräts reagieren können. Denn die Größe und Auflösung der Displays auf Laptops, Desktop-PCs, Tablets, Smartphones, E-Book-Readern und Fernsehgeräten können erheblich variieren. Der grafische Aufbau einer responsiven Website erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Website betrachtet wird.

Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden von einer Maus (klicken und überfahren) oder einem Touchscreen (tippen und wischen). Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3 mit dessen Media Queries sowie JavaScript.

Hier sehen Sie die Ausgabe ein und derselben Webseite auf verschiedenen Endgeräten. Für Unternehmen spielt da auch die Corporate Identity eine große Rolle, denn deren Ziel ist es, eine eigene Unternehmenspersönlichkeit mit hohem Wiedererkennungswert zu schaffen. Zum responsiven Webdesign gehört auch, sich an etablierte Standards zu halten. Dazu zählt beispielsweise das Hamburger-Menu-Icon auf Mobilgeräten für die Navigation.

Barrierefreiheit (auch Accessibility genannt) bezieht sich auf das Design und die Bereitstellung von Produkten, Dienstleistungen, Umgebungen und Informationen, die für alle Menschen nutzbar sind, unabhängig von ihren Fähigkeiten oder Behinderungen. Das Ziel der Barrierefreiheit ist es, Hindernisse zu beseitigen, die Menschen daran hindern könnten, auf gleicher Basis wie andere zu partizipieren. Barrierefreiheit ermöglicht es allen Menschen, aktiv am gesellschaftlichen, beruflichen und privaten Leben teilzunehmen.

Schauen wir uns einige Tipps für Barrierefreiheit von Webseiten an, bei denen HTML und auch CSS helfen können. Verwenden Sie Farben mit hohem Kontrast zwischen Text und Hintergrund, um die Lesbarkeit für Menschen mit Sehbehinderungen zu verbessern. Stellen Sie sicher, dass die Farbauswahl für Benutzer mit Farbenblindheit geeignet ist. Verwenden Sie zusätzlich zu Farbsignalen auch andere visuelle Hinweise wie Symbole oder Text. Verwenden Sie relative Einheiten Emphasis (em) anstelle von festen Pixelwerten für Schriftgrößen. Dies ermöglicht Benutzern, die Schriftgröße individuell an ihre Bedürfnisse anzupassen.

Verwenden Sie CSS-Layout-Techniken wie Flexbox und Grid, um eine flexible und zugängliche Struktur zu schaffen. Verzichten Sie auf Tabellen als Layoutmanager. Verzichten Sie auf Animationen oder Popups. Stellen Sie sicher, dass die Tabulatorreihenfolge logisch und intuitiv ist, damit Benutzer mit Tastaturnavigation die Seite effizient nutzen können. Gestalten Sie klare visuelle Indikatoren für den Fokuszustand von interaktiven Elementen wie Links und Schaltflächen, damit Benutzer sehen können, welches Element gerade ausgewählt ist. Stellen Sie sicher, dass wichtige Informationen nicht nur durch Hover-Effekte sichtbar werden, da diese auf Touch-Geräten nicht verfügbar sind. Verwenden Sie sanfte Übergänge und vermeiden Sie blinkende oder schnell wechselnde Inhalte, um Benutzer mit Epilepsie nicht zu gefährden.

Unterstützen Sie Systemeinstellungen für dunkle oder helle Themen, um Benutzern die Anpassung an ihre Präferenzen zu ermöglichen. Wählen Sie gut lesbare Schriftarten und vermeiden Sie dekorative Schriftarten, die schwer zu lesen sein können. Achten Sie auf ausreichenden Zeilenabstand (line-height) und Zeichenabstand (letter-spacing), um die Lesbarkeit zu erhöhen. Sorgen Sie für eine Navigierbarkeit über "versteckte" Menüs: Dies erlaubt ein direktes Anspringen und Selektieren von Hauptinhalt, Navigationsleiste, Header et cetera. Es ist für den normalen Leser nicht sichtbar, aber vom Screenreader lesbar und funktioniert über eine separate CSS-Datei für den Screenreader.

Die Website ist die zentrale Komponente, auf die alle anderen Technologien und Werkzeuge zugreifen, um den Inhalt zugänglicher zu machen. Viele Menschen mit motorischen oder visuellen Beeinträchtigungen nutzen die Tastatur als Hauptsteuergerät. Eine gut gestaltete, barrierefreie Website muss daher vollständig per Tastatur navigierbar sein. Menschen, die keine Maus oder Tastatur verwenden können, profitieren von Sprachsteuerungssystemen, die es ermöglichen, durch Sprachbefehle zu navigieren und Aktionen auf der Website durchzuführen. Screenreader-Software liest den Text und andere Informationen auf einer Webseite laut vor. Dies ist besonders wichtig für blinde oder stark sehbehinderte Nutzer. Die Software kann mit verschiedenen Ausgabegeräten wie Braillezeilen oder synthetischen Stimmen verbunden sein. Der Screenreader kann den Inhalt der Website in synthetische Sprache umwandeln und über Lautsprecher oder Kopfhörer ausgeben. Dies ermöglicht es sehbehinderten Nutzern, den Inhalt der Website zu hören. Eine Braillezeile ist ein Gerät, das den Text der Website in Braille-Schrift umwandelt. Dies ermöglicht es blinden Nutzern, den Inhalt taktil zu lesen. Übersetzungstools helfen Nutzern, die eine andere Sprache sprechen oder Schwierigkeiten mit der Lesekompetenz haben, den Inhalt der Website zu verstehen. Dies kann durch textliche Übersetzung oder durch Ausgabe in einfacher Sprache erfolgen.

CSS sieht dafür zur Zeit zehn Medientypen vor: "all" bezeichnet alle Medientypen. "braille" ist ein Gerät für zeilenorientierte Blindenschrift. "embossed" ist ein Braille-Drucker für Blindenschrift. "handheld" kann ein PDA oder Smartphone sein. "print" beschreibt einen Drucker. "projection" ist ein Projektor oder Beamer. "screen" ist ein klassischer Monitor. "speech" leitet auf eine Sprachausgabe per Screenreader. "tty" bezeichnet Medien mit fester Zeichenbreite wie ein Terminal. "tv" bedeutet TV-ähnliche Geräte. Mit "@media" können die Medientypen dann direkt angesprochen werden.

Hier sehen Sie ein Beispiel, wie anhand der Medienart verschiedene CSS-Dateien mit individuellen Layouts in die HTML-Seite eingebunden werden können. Darunter sehen Sie eine medienabhängige CSS-Einbindung innerhalb einer CSS-Datei oder direkt im Head einer HTML-Datei.

Ein häufiger Anwendungsfall von Media Queries ist die Umsetzung von responsive Layouts. Dafür werden Breakpoints definiert, bei denen das Layout umgebaut werden soll. Die Breakpoints sollten sich am Inhalt der Webseite orientieren. Der Ansatz, "bekannte" Bildschirmgrößen als Breakpoints zu wählen, ist nicht sinnvoll. Früher gab es nur wenige genormte Auflösungen, wie 1024 mal 768 Pixel. Heutzutage gibt es aber unzählig viele verschiedene Auflösungen. Für die Umsetzung gibt es zwei Methoden: Die erste Methode ist "Desktop-first". Dabei wird die Webseite auf Monitorgröße konzipiert und anschließend für immer kleiner werdende Bildschirme optimiert. Die zweite Methode ist "Mobile-first". Dabei wird die Webseite auf Mobilgröße konzipiert und anschließend für immer größer werdende Bildschirme optimiert. Da die Anzahl der Mobilgeräte im Vergleich zu den Desktopgeräten ständig steigt, wird heutzutage eher die Methode des "Mobile-first" angewendet.